<template>
    <div>
        <el-form>
            <el-button @click="allsc">选中删除</el-button>

            <el-select v-model="form.region" placeholder="地址">
                <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
            <el-input style="width: 200px;" placeholder="用户名" v-model="form.ss" @blur="sou"></el-input>
        </el-form>


        <!-- 弹出框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form1">
    <el-form-item label="用户名" :label-width="formLabelWidth">
      <el-input v-model="form1.yhm" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="form1.dz" autocomplete="off"></el-input>
    </el-form-item>
   
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="bjqd">确 定</el-button>
  </div>
</el-dialog>

        <!-- 表格 -->
        <el-table :data="tableData.slice((pagenum-1)*pagesize,pagenum*pagesize)" border style="width: 100%">
            <el-table-column   type="selection" prop="fa" >
            </el-table-column>
            <el-table-column fixed prop="id" label="id" >
            </el-table-column>
            <el-table-column prop="name" label="用户名">
            </el-table-column>
            <el-table-column prop="thumb" label="头像(查看大图)">
                <template slot-scope="scope" >
                    <viewer :images="imgArr"> 
                      <img :src="scope.row.thumb" alt="" />
                    </viewer>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" >
            </el-table-column>
            <el-table-column prop="state" label="状态" >
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.state}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="注册时间" >
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button @click="sc(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="bj(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    <!-- 分页 -->
    <!-- <div class="big">
        <input type="text" v-model="ipt" style="width:20px" @keyup.enter="fen"> 
        <ul>
            <li v-for="item,index in page" :key="index" @click="ma(item)">{{item}}</li>
        </ul>
    </div> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1,2 , 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

    </div>
</template>
<script>
import date from '../assets/table.json'
export default {
    data() {
        return {
            imgArr:[],
            pagenum:1,
            pagesize:5,

            dialogFormVisible:false,
            id:0,
            // page:[],
            //  ipt:'',
            list:date,
            tableData:[],
            form: {
                region: '',
                ss:''
            },
             form1: {
             yhm: '',
            dz:'',
        },
        formLabelWidth: '120px'
        };
    },
    mounted() {
        this.xr()
    },
    methods: {
          handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagenum-1
        this.pagesize=val
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum=val
      },
        //分页
        // fen(){
        //     this.page=[]
        //     this.list=date.list
        //     let asa=Math.ceil(this.list.length/this.ipt)
        //     for (let i = 1; i <= asa; i++) {
        //         this.page.push(i)               
        //     }
        //     console.log(this.page);
        //     console.log(this.list);
        //     this.tableData=this.list.slice(0,this.ipt)
        // },
        //点击页码
        // ma(item){
        //     this.list=date.list
        //     let tou=(item-1)*this.ipt
        //     let wei=item*this.ipt
        //     console.log('tou',tou);
        //     console.log('wei',wei);
        //     this.tableData=this.list.slice(tou,wei)
        // },
       
        //弹出回填
        bj(row){
            this.dialogFormVisible=true
            this.form1.yhm=row.name
            this.form1.dz=row.address
            this.id=row.id
        },
 //编辑确定
        bjqd(){
            for (let i = 0; i < this.tableData.length; i++) {
               if(this.tableData[i].id==this.id){
                this.tableData[i].name=this.form1.yhm
                this.tableData[i].address=this.form1.dz
               }
                
            }
            this.dialogFormVisible=false
        },
        //删除
        sc(row){
           for (let i = 0; i < this.tableData.length; i++) {
            if(this.tableData[i].id==row.id){
                this.tableData.splice(i,1)
            }
            
           }
        },
        //渲染
          xr(){
            this.tableData=this.list.list
            this.tableData.forEach(item => {
                    item.fa=false
            });
            console.log(this.tableData) 
        },
        //s搜索
            sou(){
                let tableData1=this.tableData.filter(item=>{
                   return item.name.includes(this.form.ss)
                })
                console.log(tableData1);
                this.tableData=tableData1
            },

        allsc(){
            console.log(this.tableData.fa);
            for (let i = 0; i < this.tableData; i++) {
                        if(this.tableData[i].fa==true){
                            this.tableData[i].splice(1)
                            console.log(this.tableData);
                        }                
            }
        },

  

   
    },
}
</script>
<style scoped>
ul{
    display: flex;
}
li{
    list-style: none;
    padding: 10px 10px;
    border: 1px solid #ccc;
    margin: 0 10px;
}
.aa{
  padding: 10px 10px;
  border: 1px solid #ccc;
}

.big{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
img{
    width: 100%;
    height: 100%;
}

</style>